<template>
  <div class="bigDiv">
    <div class="header">
      <h5>导出员工数据</h5>
    </div>
    <div style="margin-top: 10px;margin-left: 10px">
      <el-button type="success" @click="onSubmit">导出</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExportStuffInfo",
  methods: {
    onSubmit() {
      this.$axios({url:'/employee/employeeExcel',method:'get',responseType:'blob'}).then(
          (res) => {
            console.log(res)
            const content = res.data //返回的内容
            const fileName ='员工信息'+'.xlsx'//下载文件名
            this.download(content,fileName)
          }
      ).catch(
          (err) => {
            console.log(err)
          }
      )
    },
    //处理下载流
   download(content, fileName)
    {
          const blob = new Blob([content],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
          const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
          let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
          dom.style.display = 'none'
          dom.href = url;
          dom.setAttribute('download', fileName)//指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
          document.body.appendChild(dom)
          dom.click()
    }
}
}
</script>

<style scoped>
.bigDiv {
  width: 800px;
}

.header {
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  outline: 1px solid #cfd1d2;
}
</style>